@extends('layouts/app')

@section('content')
    <div class="white-bg pb-10">
        <div class="search">
            <div class="search-input" style="width: 100%;">
                <input type="text" name="search" class="weui-input f30" placeholder="搜索">
                <svg class="icon f40" aria-hidden="true">
                    <use xlink:href="#icon-tubiao-7"></use>
                </svg>
            </div>
        </div>
    </div>

    <div class="container lineup">
        <div class="weui-tab">
            <ul class="select-navbar list-unstyled">
                <li class="f30" data-id="#tab1">
                    <span>附近</span>
                    <span class="desk"></span>
                </li>
                <li class="f30" data-id="#tab2">
                    <span>销量</span>
                    <span class="desk"></span>
                </li>
                <li class="f30" data-id="#tab3">
                    <span>好评</span>
                    <span class="desk"></span>
                </li>
            </ul>
            <ul class="reserve-list list-unstyled shops-list">

            </ul>
            {{--// 加载--}}
            <div style="padding-bottom: 10%;">
                <div class="weui-infinite-scroll hasdata">
                    <div class="infinite-preloader"></div>
                    <div class="weui-loadmore">
                        <i class="weui-loading"></i>
                        <span class="weui-loadmore__tips">正在加载</span>
                    </div>
                </div>
                <div class="weui-infinite-scroll nodata">
                    <div class="weui-loadmore weui-loadmore_line">
                        <span class="weui-loadmore__tips">没有更多了</span>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script>
        var lat = '', // 纬度
            lng = ''; // 经度

        // 进来先获得地理位置
        var cityInfo = Storage.get('cityInfo');
        if (cityInfo.status) {
            cityInfo = JSON.parse(cityInfo.value);
            lat = cityInfo.lat;
            lng = cityInfo.lng;
            getData('distance', '#tab1');
        }

        var type = "distance";
        // 菜单点击事件
        $(".select-navbar li").click(function () {
            var id = $(this).attr("data-id");
            console.log("id", id);
            //置空容器
            $('.reserve-list').html('');

            // 附近商家
            if (id === '#tab1') {
                type = "distance";
                getData('distance');
            } else if (id === '#tab2') {
                // 销量商家
                type = "sales";
                getData('sales');
            } else if (id === '#tab3') {
                // 评分商家
                type = "score";
                getData('score');
            }

        });


        //        distance , sales, score
        // 获取销量商家数据
        function getData(type) {

            AjaxPage.init({
                url: '/api/list',    //路径
                cElement: document.body,    // 滚动容器
                element: '.shops-list',    // 列表容器
                type: 'listLine',      //渲染类型
                total: 0,   // 总记录条数
                loading: !1, // 加载状态
                ajaxType: 'GET',
                arg: {      // 请求参数
                    page: 1,
                    num: 8,
                    type: type,
                    lat: lat,
                    lng: lng
                }
            });
        }

        // 搜索
        $("input[name='search']").on("input", function () {
            console.log("999");
            var str = $(this).val();
            //置空容器
            $('.reserve-list').html('');
            searchKey(str);
        });

        function searchKey (str) {
            AjaxPage.init({
                url: '/api/list',    //路径
                cElement: document.body,    // 滚动容器
                element: '.shops-list',    // 列表容器
                type: 'listLine',      //渲染类型
                total: 0,   // 总记录条数
                loading: !1, // 加载状态
                ajaxType: 'GET',
                arg: {      // 请求参数
                    page: 1,
                    num: 8,
                    type: type,
                    lat: lat,
                    lng: lng,
                    s: str
                }
            });
        }

    </script>
@endsection

@extends('layouts/footer')
